<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	var mySheet, myChart;
	
	$(document).ready(function() {
		createSheet();
		createChart();
	});
	
	var fc = "";
	
	function createSheet() {
		var cfg = {SearchMode:2,Page:100};
        var headers = [
            {Text:"모델번호|용량|단가(A)|판매가(B)\nA * 1.03 / 100|현금구입가(C)\n A * 0.9 / 100|할부구입가(D)\nA * 0.93 / 100|현금부담액\nB-C|할부부담액\nB-D", Align:"Center"}
        ];
        var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
        var cols = [
            {Type:"Text",Width:130},
            {Type:"Text",Width:100},
            {Type:"Int",Width:80,SaveName:"A", Align:"Right"},
            {Type:"AutoSum",Width:85,SaveName:"B",Format:"#,##0.00",CalcLogic:"|A|*1.5/100", Align:"Right"},
            {Type:"AutoSum",Width:85,SaveName:"C",Format:"#,##0.00",CalcLogic:"|A|*0.9/100", Align:"Right"},
            {Type:"AutoSum",Width:85,SaveName:"D",Format:"#,##0.00",CalcLogic:"|A|*0.52/100", Align:"Right"},
            {Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|C|",ColMerge:1, Align:"Right"},
            {Type:"AutoAvg",Width:85,Format:"#,##0.00",CalcLogic:"|B|-|D|", Align:"Right"}
        ];
        mySheet.SetConfig(cfg);
        mySheet.InitHeaders(headers,info);
        mySheet.InitColumns(cols);
        mySheet.FitColWidth(fc);
	    mySheet.DoSearch("../data/sheetData2.xml");
	}
	
	function createChart() {
		var cfg = {
			Chart:{
				Type:"column",
				PlotBackgroundColor : "#F7FAFB",
				PlotBorderColor:"#A9AEB1",
				PlotBorderWidth:0.5,
				BackgroundColor:{
					LinearGradient : [0,0,100,500],
					Stops : [
						[0, "#FFFFFF"],
						[1, "#D3D9E5"]
					]
				},
				BorderColor:"#84888B"
			},
			Colors : ["#7AAAEE","#F06F3E","#AAEE6A","#F0E150","#5DA0A9","#75738B"],
			Title:{
				Text:"IBSheet와 연동",
				Style:{
					Color:"#15498B",
					FontFamily:"Dotum",
					FontWeight:"bold"
				}
			},
			Legend : {
		    	Layout : "horizontal",			// Legend 모양 설정
				Align : "center",				// Legend 가로 정렬 설정
				VerticalAlign : "bottom"		// Legend 세로 정렬 설정
		    },
			YAxis:{
				Title:{
					Text:""
				}
			}
		}
	
		myChart.SetOptions(cfg);
		myChart.Draw();
	}
	
	function mySheet_OnSearchEnd(Code, Msg, StCode, StMsg) {
		mySheet.FitColWidth();
	}
	
	function chartDraw(cnt) {
        myChart.RemoveAll();
        
        try {
            var pparam = {
                datadirection:"vertical"
                ,datarowcol:"3|4|5"
                ,legendseriesname:"판매가|현금구입가|할부구입가"
                ,legendtitle:"시트차트테스트4"
                ,startdatarowcol:1
                ,enddatarowcol:cnt
                ,labelrowcol:0
                ,startlabelrowcol:1
                ,endlabelrowcol:cnt
                ,labeldirection:"vertical"
                ,seriestype:["line", "column", "area"]
            };
            sheet2chart(mySheet,myChart,pparam);
        } catch(e) {
            alert(e.message);
        }
    }
</script>
<title>시트와 차트 연동 예제(2)</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/chartNavi.jsp" %>	
	<div id="title">시트와 차트 연동 예제(2)</div>
	<div id="desc">
		시트의 여러개의 셀을 선택해서 차트에 보여주는 예제 
	</div>

	<div id="functionArea">
		<input type="button" value="10건 차트그리기" onclick="chartDraw(10)">
		<input type="button" value="50건 차트그리기" onclick="chartDraw(50)">
	</div>
	
	<div id="viewArea">
		<table border="0" width="100%">
			<tr>
				<td width="50%">
					<script type="text/javascript">
						createIBSheet("mySheet", "100%", "300px");
					</script>
				</td>
				<td width="50%">
					<script type="text/javascript">
						createIBChart("myChart", "100%", "300px");
					</script>
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>